<template>
  <view class="body">
    <search />
    <GoodsListTab :tabsList="tabsList" />
    <view class="goods">
      <GoodsListItem
        v-for="goods in goodsList"
        :key="goods.goods_id"
        :goods="goods"
      >
        <template slot="right">
          <view class="btn">立即购买</view>
        </template>
      </GoodsListItem>
      <view class="has_more">{{ tips }}</view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search/index.vue";
import GoodsListTab from "@/components/GoodsListTab/index.vue";
import GoodsListItem from "@/components/GoodsListItem/index.vue";
import { getGoodsList } from "@/api/goodsList";
export default {
  components: {
    Search,
    GoodsListTab,
    GoodsListItem,
  },
  data() {
    return {
      tabsList: [
        { id: 1, name: "综合" },
        { id: 2, name: "价格" },
        { id: 3, name: "销量" },
      ],
      cid: "",
      query: "",
      goodsList: [],
      total: "",
      pagenum: 1,
      pagesize: 20,
      tips: "",
    };
  },
  watch: {
    goodsList() {
      if (this.goodsList.length === this.total) {
        this.tips = "没有更多数据了!";
      }
    },
  },
  onLoad(query) {
    if (query.query) {
      this.query = query.query;
    }
    if (query.cat_id) {
      this.cid = query.cat_id;
    }
    this.getGoodsList();
  },
  async onPullDownRefresh() {
    this.pagenum = 1;
    this.tips = "加载中···";
    this.goodsList = [];
    await this.getGoodsList();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    this.pagenum++;
    if (this.goodsList.length !== this.total) {
      this.getGoodsList();
    } else {
      this.tips = "没有更多数据了!";
    }
  },
  methods: {
    async getGoodsList() {
      const res = await getGoodsList({
        cid: this.cid,
        query: this.query,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });
      this.total = res.data.message.total;
      this.goodsList = [...this.goodsList, ...res.data.message.goods];
    },
  },
};
</script>

<style lang="less">
.body {
  background-color: #f8f8f8;
  width: 100vw;
  min-height: 100vh;
  .btn {
    font-size: 24rpx;
    height: 40rpx;
    line-height: 40rpx;
    padding: 0 20rpx;
    color: #eee;
    border-radius: 10rpx;
    background-color: #ea4350;
  }
  .has_more {
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #ccc;
  }
}
</style>